<template>
  <!-- <div class="p1756514767" v-if="(serviceStatus ==  1 || serviceStatus == 0) && deliveryType === 1">
    <div class="fac jcc" style="flex-direction: column;">
      <div class="fz28" style="font-weight: 700;line-height: 1;">3.2</div>
      <div class="fz24" style="color: #727171;zoom:0.9;line-height: 1;">km</div>
    </div>
    <div class="p1756514712" :style="{height: ((clientHeight / 2) - 12) + 'px'}"></div>
    <div class="p1756514096">
      <uv-icon color="#727171" name="map-fill" size="28rpx"></uv-icon>
    </div>
    <div class="p1756514712" :style="{height: ((clientHeight / 2) - 12)+ 'px'}"></div>
    <div class="fac jcc " style="flex-direction: column;">
      <div class="fz28" style="font-weight: 700;line-height: 1;">3.2</div>
      <div class="fz24" style="color: #727171;zoom:0.9;line-height: 1;">km</div>
    </div>
  </div> -->
  <div class="p1756521494" v-if="serviceStatus ==  2 && deliveryType === 1 ">
    <div class="p1756521272"></div>
    <div class="p1756514712" :style="{height: (clientHeight - 5) + 'px'}"></div>
    <!-- <div class="p1756514712" style="height: 40rpx;"></div> -->
    <div style="background-color: #B5B5B6;" class="p1756521272"></div>
  </div>
  <div class="p1756521494" v-else-if="(serviceStatus ==  3 && deliveryType === 1) || ((serviceStatus ==  1 || serviceStatus == 0) && deliveryType === 1)">
    <div style="background-color: #B5B5B6;" class="p1756521272"></div>
    <div class="p1756514712" :style="{height: (clientHeight - 5) + 'px'}"></div>
    <!-- <div class="p1756514712" style="height: 41rpx;"></div> -->
    <div style="background-color: #333;" class="p1756521272"></div>
  </div>
  <div class="p1756521494" v-else-if="serviceStatus ==  4 && deliveryType === 1">
    <div style="background-color: #F9842D;" class="p1756521272"></div>
    <div class="p1756514712" :style="{height: (clientHeight - 7) + 'px'}"></div>
    <!-- <div class="p1756514712" style="height: 30rpx;"></div> -->
    <div style="background-color: #00AF53;" class="p1756521272"></div>
  </div>
  <div class="p1756521494" v-else-if="serviceStatus ==  5 && deliveryType === 1">
    <div style="background-color: #9FA0A0;" class="p1756521272"></div>
    <div class="p1756514712" :style="{height: (clientHeight - 8) + 'px'}"></div>
    <!-- <div class="p1756514712" style="height: 30rpx;"></div> -->
    <div style="background-color: #9FA0A0;" class="p1756521272"></div>
  </div>
  <div class="p1756521494" v-else-if="(serviceStatus ==  4 || serviceStatus ==  5) && deliveryType === 2">
    <div v-if="serviceStatus ==  4" style="background-color: #00AF53;" class="p1756521272"></div>
    <div v-if="serviceStatus ==  5" style="background-color: #9FA0A0;" class="p1756521272"></div>
  </div>
  <div v-else-if="deliveryType == -1 && serviceStatus != 4" class="p1756521494" style="margin-left: 0!important;">
    <div class="p1756521272"></div>
    <div class="p1756514712" :style="{height: clientHeight + 'px'}"></div>
    <!-- <div v-if="deliveryType === 1" class="p1756514712" style="height: 17rpx;"></div> -->
    <div class="fac jcc " style="flex-direction: column;">
      <div class="fz28 single-line" style="max-width:  90rpx; font-weight: 700;line-height: 1;">{{form.distance}}</div>
      <div class="fz24" style="color: #727171;zoom:0.9;line-height: 1;">m</div>
    </div>
  </div>
  <!-- <template v-else-if="deliveryType == -1 && serviceStatus == 4">
    <div class="fac jcc p1756521494-4-4" style="">服</div>
  </template> -->
  <div v-else class="p1756521494">
    <div class="p1756521272"></div>
    <div class="p1756514712" :style="{height: clientHeight + 'px'}"></div>
    <!-- <div v-if="deliveryType === 1" class="p1756514712" style="height: 17rpx;"></div> -->
    <div v-if="deliveryType === 1" class="p1756514712" style="height: 50rpx;"></div>
  </div>
</template>
<script>
export default {
  props: {
    serviceStatus: {
      type: Number,
      default: 0
    },
    clientHeight: {
      type: Number,
      default: 0
    },
    deliveryType: {
      type: Number,
      default: 1
    },
    form: {
      type: Object,
      default: {}
    },

  },
}
</script>
<style lang="scss" scoped>
@import "../common.scss";
.p1756514767 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f8f8;
  border-radius: 50rpx;
  width: 60rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  position: relative;

  .p1756514096 {
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.p1756514712 {
  width: 2rpx;
  background-color: #dcdddd;
}

.p1756521272 {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  background-color: #333;
}

.p1756521494 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30rpx;
  padding-top: 0;
  height: 100%;
  margin-left: 30rpx;
  margin-bottom: auto;
  margin-top: auto;
  box-sizing: border-box;
}

.p1756521494-4-4 {
  min-width: 50rpx;
  max-width: 50rpx;
  min-height: 50rpx;
  max-height: 50rpx;
  background: #00af53;
  color: #fff;
  border-radius: 50%;
  font-size: 28rpx;
  line-height: 1;
}
</style>